<script>
import {MdEditor, NormalToolbar, ModalToolbar} from "md-editor-v3";
import 'md-editor-v3/lib/style.css';
import {TrendCharts, Plus, DeleteFilled} from "@element-plus/icons-vue";
import {useCommonStore} from "@/store/common/store.js";
import {mapActions} from "pinia";
import mixins from "@/assets/js/mixins.js";

let that;
export default {
  name: "Edit",
  mixins: [mixins],
  components: {MdEditor, ModalToolbar, NormalToolbar, TrendCharts, Plus, DeleteFilled},
  data() {
    return {
      resource: {
        id: '',
        subject: '',
        content: '',
        type: '',
        categoryId: '',
        coverImage: '',
        url: '',
        isList: 1,
        status: '正常'
      },
      types: [{
        name: "免费项目",
        value: "免费项目"
      }, {
        name: "首码项目",
        value: "首码项目"
      }, {
        name: "实战项目",
        value: "实战项目"
      }, {
        name: "会员介绍",
        value: "会员介绍"
      }],
      categorys: [],
      resourceRules: {
        subject: [{
          required: true,
          message: '请输入资源标题',
          trigger: 'blur'
        }],
        content: [{
          required: true,
          message: '请输入资源内容',
          trigger: 'change'
        }],
        type: [{
          required: true,
          message: '请选择资源类型',
          trigger: 'change'
        }],
        categoryId: [{
          required: true,
          message: '请选择资源分类',
          trigger: 'change'
        }],
        url: [{
          required: true,
          message: '请输入资源链接',
          trigger: 'blur'
        }]
      },
      toolbars: [
        'bold',
        'underline',
        'italic',
        '-',
        'title',
        'strikeThrough',
        'sub',
        'sup',
        'quote',
        'unorderedList',
        'orderedList',
        'task',
        '-',
        'codeRow',
        'code',
        'link',
        'image',
        0,
        'table',
        '-',
        'revoke',
        'next',
        'save',
        '=',
        'pageFullscreen',
        'fullscreen',
        'preview',
        'previewOnly',
        'htmlPreview',
        'catalog',
        'github',
      ],
      oss: {
        ossModalVisible: false
      },
      fileList: [],
      image: null
    }
  },
  created() {
    this.loadCategory();
    this.loadResource(this.$router);
    that = this;
    this.pageType = "resource";
  },
  methods: {
    loadResource(router) {
      let query = router.currentRoute.value.query;
      let id = query.id;
      if (id) {
        this.selectById("resource", id).then(res => {
          let data = res.data;
          data.coverImage = "data:image/png;base64," + data.coverImage;
          this.resource = data;
        })
      }
    },
    loadCategory() {
      this.selectList("category", null).then(res => {
        this.categorys = res.data;
      })
    },
    onUploadImg(files, callback) {
      let file = files[0];
      this.uploadFile(file).then(res => {
        let data = res.data;
        let imageUrl = data['imageUrl']
        callback([imageUrl])
        that.resource.coverImage = imageUrl;
      })
    },
    submit() {
      this.$refs.resourceRef.validate(valid => {
        if (valid) {
          let id = this.resource.id;
          let form = {
            id: id,
            subject: this.resource.subject,
            content: this.resource.content,
            type: this.resource.type,
            categoryId: this.resource.categoryId,
            url: this.resource.url,
            isList: this.resource.isList,
            status: this.resource.status,
            file: this.image
          }
          let method = 'onSubmit';
          if (id) {
            method = "onEdit";
          }
          this[method](form).then(res => {
            this.$router.push("/resource")
          })
        }
      })
    },
    handlerOss() {
      this.oss.ossModalVisible = true
    },
    handlePictureCard(uploadFile) {
      this.image = uploadFile.raw;
      this.resource.coverImage = URL.createObjectURL(uploadFile.raw);
    }
  }
}
</script>

<template>
  <el-form :model="resource" :rules="resourceRules" ref="resourceRef">
    <div class="flex-rcsr basicArea">
      <el-form-item prop="subject" required label="资源标题" style="width:100%">
        <el-input v-model="resource.subject" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item required label="资源分类" style="width:30%" prop="categoryId">
        <el-select placeholder="请选择资源分类" v-model="resource.categoryId">
          <el-option v-for="category in categorys" :key="category.id" :label="category.categoryName"
                     :value="category.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item required label="资源类型" style="width:30%" prop="type">
        <el-select placeholder="请选择资源类型" v-model="resource.type">
          <el-option v-for="type in types" :key="type.value" :label="type.name" :value="type.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item required label="是否加入列表" style="width:30%" prop="url">
        <el-radio-group v-model="resource.isList">
          <el-radio label="是" :value="1"></el-radio>
          <el-radio label="否" :value="0"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item required label="封面图片" style="width:100%">
        <div class="flex-rn" style="align-items: flex-end">
          <div class="coverImage">
            <el-image v-if="resource.coverImage" fit="cover" :src="resource.coverImage"></el-image>

            <div class="coverImageShadow">
              <el-icon @click="resource.coverImage = ''">
                <DeleteFilled/>
              </el-icon>
            </div>
          </div>
          <el-upload
              action="#"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="handlePictureCard"
              list-type="text">
            <el-button style="margin-left:20px;" type="primary">选择图片</el-button>
          </el-upload>
        </div>
      </el-form-item>
    </div>

    <div style="margin-top:20px">
      <el-form-item required prop="content">
        <MdEditor :toolbars="toolbars" v-model="resource.content" @onUploadImg="onUploadImg">
          <template #defToolbars>
            <ModalToolbar :visible="oss.modalVisible"
                          showAdjust
                          title="选择OSS图片"
                          modalTitle="选择OSS图片"
                          width="870px"
                          height="600px"
                          @onClick="oss.modalVisible = true"
                          @onClose="oss.modalVisible = false"
            >
              111
              <template #trigger>
                <NormalToolbar @onClick="handlerOss">
                  <template #trigger>
                    <el-icon size="17">
                      <TrendCharts/>
                    </el-icon>
                  </template>
                </NormalToolbar>
              </template>
            </ModalToolbar>
          </template>
        </MdEditor>
      </el-form-item>
    </div>

    <div class="flex-rcsr basicArea" style="margin-top:20px">
      <el-form-item required label="资源链接" style="width:100%" prop="url">
        <el-input :rows="4" type="textarea" v-model="resource.url" placeholder="请输入资源的链接"></el-input>
      </el-form-item>

      <el-form-item label="" style="width:100%;position:relative;">
        <div style="position:absolute;right:1px;top:-5px;">
          <el-button class="submit_btn" style="width:90px;" @click="submit"> 提 交</el-button>
        </div>
      </el-form-item>
    </div>
  </el-form>
</template>

<style lang="scss">
.basicArea {
  background-color: #fff;
  padding: 20px;
}

.coverImage {
  padding: 5px;
  border: 1px dashed #bbb;
  cursor: pointer;
  width: 450px;
  height: 300px;
  position: relative;

  &:hover {
    border-color: #7425eb;

    > .coverImageShadow {
      display: block;
    }
  }

  .el-icon {
    position: absolute;
    top: 4px;
    right: 5px;
    color: #fff;
  }

  .el-icon:hover {
    color: brown;
  }

  .coverImageShadow {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.4);
    display: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .el-image {
    height: 100%;
    width: 100%;
  }

}
</style>
